/* 
目标：把列表抽离成 组件 List
  1. 数据父传子 - 通过属性传值
  2. 数据子传父 - 通过触发事件传值
*/
import React from 'react';


class List extends React.Component {
  render() {
    console.log(this.props);
    return (
      <ol>
        {
          this.props.list.map((item, index) => <li onDoubleClick={() => this.props.aa(index)} key={item}>{item}</li>)
        }
      </ol>
    );
  }
}

class App extends React.Component {
  state = {
    inputValue: '菠萝',
    list: ['新闻1', '新闻2']
  };
  // 获取表单值
  handleChange = (e) => {
    // console.log(e.target.value);
    this.setState({ inputValue: e.target.value });
  };

  // 点击发布按钮
  handleClick = () => {
    // 利用解构赋值获取数据
    let { inputValue, list } = this.state;

    if (inputValue.trim() === '') {
      alert('请输入内容');
      return;
    }
    // indexOf 
    // 如果包含    返回索引值
    // 如果不包含  返回 -1
    if (list.indexOf(inputValue) === -1) {
      // 检测数据是否有重复 - 数组去重
      list.unshift(inputValue);
      // 更新视图
      this.setState({ list, inputValue: '' });
    }
  };

  itemDelete = (index) => {
    const { list } = this.state;
    list.splice(index, 1);
    this.setState({ list });
  };
  render() {
    // 利用解构赋值获取数据
    const { list, inputValue } = this.state;
    return (
      <div className="App">
        <input type="text" value={inputValue} onChange={this.handleChange} />
        <button onClick={this.handleClick}>发布</button>
        <List list={list} aa={this.itemDelete}></List>
      </div>
    );
  }
}


export default App;
